<template>
	<view class="detail-container">
		<view class="header">
			<view class="header-content">
				<view class="left">
					<image class="image" src="@/static/morentouxiang.png"></image>
					{{detail.studentName}}
				</view>
				<view class="right">
					<uni-tag :text="getApproveStatus(detail.status, approveStatusList).label" :class="['status_' + detail.status]"
						:type="getApproveStatus(detail.status, approveStatusList).type" size="default" />
				</view>
			</view>
		</view>
		<uni-section title="基本信息" type="line" padding>
			<view class="form-container">
				<view class="group">
					<view class="group-label">单据号：</view>
					<view class="group-value">{{detail.applyNo}}</view>
				</view>
				<view class="group">
					<view class="group-label">请假类型：</view>
					<view class="group-value">{{detail.leaveType}}</view>
				</view>
				<view class="group">
					<view class="group-label">开始时间：</view>
					<view class="group-value">{{formatDateTime(detail.startTime)}}</view>
				</view>
				<view class="group">
					<view class="group-label">结束时间：</view>
					<view class="group-value">{{formatDateTime(detail.endTime)}}</view>
				</view>
				<view class="group">
					<view class="group-label">时长(天)：</view>
					<view class="group-value">{{detail.leaveDay}}</view>
				</view>
				<view class="group">
					<view class="group-label">请假说明：</view>
					<view class="group-value">{{detail.remark}}</view>
				</view>
				<view class="group">
					<view class="group-label"> 附件：</view>
					<view class="group-value">
						<uni-file-picker readonly :value="attachList" :image-styles="imageStyles"></uni-file-picker>
					</view>
				</view>
			</view>
		</uni-section>
		<view>
			<uni-section title="审批进度" type="line" padding>
				<view class="zong">
					<view class="user_box" style="width: 80%;">
						<view class="user_for" v-for="(list,id) in list2" :key="id">
							<view class="line_box">
								<!-- 圆球 -->
								<view class="line_radio"
									:style="{ 'background' : (list.status != -1) ? '#ef6f16' : '#8e8b8d' , 'border' : (list.status != -1) ? 'solid 6rpx #fbc293' : 'solid 6rpx #b9b7b6'}">
								</view>
								<!-- 线 -->
								<view class="line_for" v-for="item in 3"
									:style="{ 'background' : (list.status != -1) ? '#ef6f16' : '#8e8b8d'}"></view>
							</view>

							<view class="right_box" :style="{ 'color' : (list.status != -1) ? '#ef6f16' : '#8e8b8d'}">
								<view class="title">
									<view style="display: flex; align-items: center;">
										<text style="margin-right: 20rpx;">{{list.nodeName}}</text>
										<uni-tag :text="getApproveStatus(list.status, nodeStatusList).label"
											:class="['status_' + lsit.status]"
											:type="getApproveStatus(list.status, nodeStatusList).type" size="small" />
									</view>
								</view>
								<view class="desc">
									<text style="margin-right: 20rpx;" v-if="list.userName"> {{ list.userName }} </text>
									<text v-if="list.approveTime">{{formatDateTime(list.approveTime)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-section>
		</view>
		<view>
			<!-- <button @click="handleRevoke">撤销</button> -->
		</view>
	</view>
</template>

<script>
	import {
		leaveApplyDetail
	} from "@/api/system/user"

	import {
		formatDateTime
	} from '@/utils/common.js'
	export default {
		components: {},
		data() {
			return {
				imageStyles:{
				width:64,
				height:64,
			},
				approveStatusList: [{
						label: '待审核',
						value: -1,
						type: 'info'
					},
					{
						label: '审核中',
						value: 0,
						type: 'warning'
					},
					{
						label: '审核通过',
						value: 1,
						type: 'success'
					},
					{
						label: '已驳回',
						value: 2,
						type: 'danger'
					},
					{
						label: '已作废',
						value: 3,
						type: 'default'
					},
				],
				nodeStatusList: [{
						label: '未开始',
						value: -1,
						type: 'info'
					},
					{
						label: '待审核',
						value: 0,
						type: 'info'
					},
					{
						label: '审核通过',
						value: 1,
						type: 'success'
					},
					{
						label: '审核驳回',
						value: 2,
						type: 'danger'
					},
				],
				detail: {

				},
				attachList: [],
				list2: [],
				currentStep: 0,
			}
		},
		onLoad(options) {
			this.getInfo(options)
		},
		mounted() {

		},
		methods: {
			formatDateTime,
			getInfo(options) {
				leaveApplyDetail(options.id).then(response => {
					console.log(response.data);
					this.detail = response.data;
					this.attachList = (response.data.attachList || []).map(c => {
						c.url = c.filePath;
						c.name = c.fileName;
						return c;
					})
					console.log(this.attachList)
					this.list2 = response.data.nodeList
				})
			},
			getApproveStatus(status, list) {
				return list.filter(c => c.value == status)[0] || {};
			},
			handleRevoke() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container {
		background-color: #fff;
		height: 100vh;
		.header {
			background-color: #fff;
			padding: 20rpx;

			&-content {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f1f1f1;
				padding-bottom: 30rpx;
				align-items: center;

				.left {
					display: flex;
					align-items: center;
				}
			}

			.image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 40rpx;
			}
		}

		.form-container {
			.group {
				margin-bottom: 15rpx;
				display: flex;

				&-label {
					padding-left: 10rpx;
					padding-right: 10rpx;
					width: 30%;
				}

				&-value {}
			}
		}
	}

	.user_for {
		display: flex;
	}

	.item_year {
		font-size: 34rpx;
		height: 50rpx;
	}

	.line_for {
		width: 4rpx;
		height: 24rpx;
		margin: 0 20rpx 10rpx;
		background-color: #559DFF;
	}

	.line_radio {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}

	.right_box {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.desc {
		font-size: 30rpx;
		color: #8e8b8d;
		display: flex;
		margin-top: 20rpx;
		align-items: center;

	}

	image {
		margin-right: 20rpx;
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
	}
</style>